.classes,
.article {
    &-content,
    &-main {
        // background-color: @c-f8;
    }
    &-list-item {
        margin-bottom: 20px;
        font-size: 18px;
        border-radius: @border-radius;
        cursor: pointer;
    }
}

.article-list {
    &-item {
        height: 180px;
        margin-bottom: 20px;
        background-color: @bg;
        transition: all 0.3s;
        overflow: hidden;
        &:last-child {
            margin-bottom: 0;
        }
        &:hover {
            box-shadow: 0px 0 10px @c-333;
            .text .title {
                color: @primary;
            }
            .img {
                height: 180px;
                background-color: @c-ccc;
                transform: scale(1.1);
            }
        }
        .wrap {
            overflow: hidden;
            // margin-right: 20px;
        }
        .img {
            height: 180px;
            background-color: @c-ccc;
            transition: all 0.3s;
            // &:hover {
            //     transform: scale(1.2);
            // }
        }
        .text {
            padding: 15px 20px 15px 0;
            width: calc(100% - 355px);
            text-align: justify;
            position: relative;
            margin-left: 20px;
            .title {
                font-size: 18px;
                // height: 48px;
                line-height: 24px;
                color: @c-333;
            }
            .desc {
                margin-top: 5px;
                max-height: 68px;
                font-size: 16px;
                line-height: 22px;
                color: @c-666;
                overflow: hidden;
            }
            .time {
                position: absolute;
                bottom: 15px;
                font-size: 14px;
                color: @c-999;
            }
        }
    }
}
